<template>
	<view class="pageRoot">
		<view class="headerTop position-relative  px-3" style="padding-top:21rpx;">
			<view class="searchBarBox px-2 d-flex align-items-center">
				<u-icon name="search" class="mr-1" color="#979797" style="width: 26rpx;height: 26rpx;"></u-icon>
				<input type="text" placeholder="华润万家">
			</view>
			<view class="w-100  d-flex  justify-content-between" style="margin-top: 72rpx;height: 90rpx;">
				<image src="/static/img/images/dianPuLogo.png" style="width: 80rpx;" class=" h-100" mode="aspectFill">
				</image>
				<view class="dianPuContent tc-fff  h-100 px-1">
					<view class="w-100 u-line-1 fz-28">
						每一天便利（科技路店）
					</view>
					<view class="w-100 fz-24 d-flex align-items-center">
						<u-rate size="35" active-color="#FFD215" v-model="dianPuRate"></u-rate>
						<text style="color: #FFD215;">4.8分</text>
					</view>
				</view>
				<view class=" br-100 guanZhuBtn tc-fff fz-24 con-center2" style="width: 126rpx;height: 50rpx;">
					+ 关注
				</view>
			</view>
			<view class="w-100 fz-26 tc-ddd" style="margin-top: 34rpx;">
				<view class="w-100">
					营业时间：08:00-22:00
				</view>
				<view class="w-100 mt-1">
					营业时间：08:00-22:00
				</view>
			</view>
			<view class="manJianBox br-10">
				<view class="w-100 fw-bd fz-30">
					满减活动
				</view>

				<scroll-view :scroll-x="true" style="width: 100%;overflow-x: scroll;white-space: nowrap;"
					class=" d-flex ">
					<view v-for="(d,i) in 3" :key="d" class="manJianCardBox mr-2" :style="'background-image: url(static/img/images/manJian'+(i+1)+'.png);'">

						<view class="w-100 tc-fff fz-24" style="height: 22rpx;margin-top: -5rpx;">
							<text style="transform: scale(0.9,0.9);">通用券</text>
						</view>
						<view class="w-100 con-between mt-1">
							<view class="con-center2 bc-fff br-10" style="width: 148rpx;height: 30rpx;">
								<view style="transform: scale(0.6,0.6);white-space: nowrap;color: #AAD39E;">全店铺商品通用
								</view>
							</view>
							<view>
								<view style="font-size: 36rpx;" class="mr-2 tc-fff position-relative">10
									<text style="position: absolute;transform: scale(0.7,0.7);" class="fz-24">元</text>
								</view>
							</view>

						</view>
						<view class="w-100 con-between tc-fff fz-24">
							<text
								style="transform: scale(0.7,0.7);white-space: nowrap;margin-left: -20rpx;">2日后到期</text>
							<text
								style="transform: scale(0.7,0.7);white-space: nowrap;margin-right: -20rpx;">满100可用</text>
						</view>
					</view>
				</scroll-view>
			</view>


		</view>
		<view class="classListBox  d-flex justify-content-between">
			<scroll-view scroll-y="true" class="leftClassBox">
				<view v-for="(d,i) in dataList">
					<view class="w-100 con-between" @click="dataListActive=d.classId"
						:style="'padding: 26rpx 24rpx;'+(d.classId==dataListActive?'background:#fff;':'')">
						<view class="" v-if="d.icon">
							<image :src="d.icon" style="width:24rpx; height:24rpx;margin-right: 10rpx;"></image>
						</view>
						<text class="fz-24 tc-333 fw-bd">{{d.title}}</text>
					</view>
				</view>
				<view class="w-100" style="height: 120rpx;">

				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="rightContentBox ">
				<view class="goodAd ">
				</view>
				<view class="w-100 fz-32 fw-bd" style="margin-top: 40rpx;">
					{{classDetail.title}}
				</view>
				<view class="w-100" v-if="classDetail.goods&&classDetail.goods.length>0">
					<view class="w-100 con-between" style="margin-top: 52rpx;" v-for="(d,i) in classDetail.goods"
						:key="d.id">
						<image src="/static/img/images/goodImage.png" mode="aspectFill"
							style="height: 180rpx;width: 180rpx;"></image>
						<view class="" style="width: calc(100% - 200rpx);">
							<view class="fz-28 u-line-1 fw-bd white-space-nowrap">{{d.title}}</view>
							<view class="w-100 fz-24" style="color: #60B3A7;">
								{{d.describe}}
							</view>
							<view class="w-100 fz-24 tc-9B9B9B" style="margin-top: 12rpx;">
								<text>月销{{d.sales}}</text>
								<text class="ml-3">库存{{d.inventory}}</text>
							</view>
							<view class="w-100 d-flex justify-content-between" style="margin-top: 12rpx;">
								<view class="w-60 d-flex justify-content-between align-items-flex-end">
									<view class="d-flex align-items-flex-end" style="color: #FF1515;">
										<view class="fz-24" style="transform: scale(0.8,0.8);">
											￥
										</view><text style="font-size: 40rpx;font-weight: bold;">{{d.price}}</text>
									</view>
									<del class="tc-9B9B9B fz-28">￥{{d.oldPrice}}</del>
								</view>

								<u-icon name="plus-circle-fill" @click="addCommodityToShoppingCart(d)" color="#0F5D43"
									size="42"></u-icon>
							</view>
						</view>

					</view>
					<view class="w-100  con-center2" style="height: 100rpx;">
						没有更多了~
					</view>
				</view>

				<view class="w-100  con-center2" style="height: 300rpx;" v-else>
					<u-empty text="暂无商品" mode="favor"></u-empty>
				</view>
				<view class="w-100" style="height: 120rpx;">

				</view>
			</scroll-view>


		</view>
		<view class="shoppingCartBar con-between">
			<view class="position-relative" @click="openShoppingCart()">
				<image src="/static/img/icon/shoppingCart.png" mode="aspectFill"
					style="height: 60rpx; width:70rpx;margin-right: 40rpx;">
				</image>
				<u-badge size="mini" type="error" :offset="[0,20]" :count="selectCount()"></u-badge>
			</view>
			<view class=" tc-fff fz-26" style="width:calc(100% - 300rpx);">
				总计: <text class="fz-24 position-relative"
					style="transform: scale(0.8,0.8);display: inline-block;bottom: -5rpx;">￥</text>
				<text style="font-size: 40rpx;">{{totalPrice}}</text>
			</view>
			<view @click="jumpPage('/pages/order/order')" style="width: 166rpx; height: 100%;background: linear-gradient(135deg, #9FDAC6 10%, #47B64B 90%);"
				class="con-center2 br-10 tc-fff">
				去结算
			</view>
		</view>
		<u-popup v-model="shoppingCartShow" mode="bottom" border-radius="20">
			<view class="w-100 px-4 py-3">
				<view class="w-100" v-if="shoppingCartData.length>0">
					<view class="w-100">
						<u-checkbox size="40" shape="circle" v-model="cartAllSelectChecked"  name="全选"
							@change="selectAll"> <text class="fz-28 fw-bd">全选</text><text
								class="fz-28 ml-2 tc-9B9B9B">(已选{{selectCount()}}件)</text>
						</u-checkbox>
					</view>
					<scroll-view class="shoppingCartDetailBox">
						<view class="w-100 con-between" v-for="(d,i) in shoppingCartData" :key="i"
							style="margin-top: 56rpx;">
							<u-checkbox size="40" @change="goodsSelect($event,d,i)" shape="circle" v-model="d.selected"
								:name="d.commodityId" class="" style="width:200rpx ;">
								<image src="/static/img/images/goodImage.png" mode="aspectFill"
									style="height: 128rpx;width: 128rpx;"></image>
							</u-checkbox>
							<view class=" d-flex flex-column justify-content-between "
								style="width:calc(100% - 220rpx);height: 128rpx;">
								<view class="w-100 u-line">
									{{d.title}}
								</view>
								<view class="w-100 con-between ">
									<text style="color: #FF1515;">
										<text class="fz-24 position-relative"
											style="transform: scale(0.8,0.8);display: inline-block;bottom: -5rpx;">￥</text>
										<text style="font-size: 40rpx;">{{setPrice(d.count,d.price)}}</text>

									</text>
									<u-number-box input-width="50" input-height="50" v-model="d.count"
										@change="goodsCountChange($event,d,i)"></u-number-box>

								</view>
							</view>
						</view>
						<view class="w-100" style="height: 120rpx;">

						</view>

					</scroll-view>
				</view>

				<view class="w-100" v-else>
					<u-empty text="空空如也~" mode="car"></u-empty>
				</view>
				

			</view>
		</u-popup>
		<!-- <signComponentByDan :show="signComponentByDanShow"></signComponentByDan> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				dianPuRate: 5,
				signComponentByDanShow:false,
				shoppingCartShow: false,
				dataListActive: 0,
				manJianCardBoxStyle:"",
				cartAllSelectChecked: false,
				dataList: [{
						classId: 0,
						icon: "/static/img/icon/shpoListClassTag1.png",
						title: "热销爆款",
						goods: [{
								commodityId: 1,
								classId: 0,
								title: "好麦绵柔提子蛋糕280g/袋",
								goodImage: "/static/img/images/goodImage.png",
								price: 15.9,
								oldPrice: 20,
								sales: 59,
								inventory: 155,
								describe: "入口柔软  鲜香浓郁"
							},
							{
								commodityId: 2,
								classId: 0,
								title: "蜜豆寿司 350g/袋",
								goodImage: "/static/img/images/goodImage.png",
								price: 15.9,
								oldPrice: 20,
								sales: 59,
								inventory: 155,
								describe: "入口柔软  鲜香浓郁"
							},
							{
								commodityId: 3,
								classId: 0,
								title: "鲜果蛋挞面包 2只/盒",
								goodImage: "/static/img/images/goodImage.png",
								price: 15.9,
								oldPrice: 20,
								sales: 59,
								inventory: 155,
								describe: "入口柔软  鲜香浓郁"
							},
							{
								commodityId: 4,
								classId: 0,
								title: "迷你甜甜圈 195g（7只/组）",
								goodImage: "/static/img/images/goodImage.png",
								price: 17.9,
								oldPrice: 22,
								sales: 59,
								inventory: 155,
								describe: "入口柔软  鲜香浓郁"
							}
						]
					},
					{
						classId: 1,
						goods: [{
							commodityId: 5,
							classId: 1,
							title: "好麦绵柔提子蛋糕280g/袋",
							goodImage: "/static/img/images/goodImage.png",
							price: 15.9,
							oldPrice: 20,
							sales: 59,
							inventory: 155,
							describe: "入口柔软  鲜香浓郁"
						}, ],
						icon: "/static/img/icon/shpoListClassTag2.png",
						title: "单品活动"
					},
					{
						classId: 2,
						goods: [{
							commodityId: 6,
							classId: 2,
							title: "好麦绵柔提子蛋糕280g/袋",
							goodImage: "/static/img/images/goodImage.png",
							price: 15.9,
							oldPrice: 20,
							sales: 59,
							inventory: 155,
							describe: "入口柔软  鲜香浓郁"
						}, ],
						icon: "/static/img/icon/shpoListClassTag3.png",
						title: "新品上架"
					},
					{
						classId: 3,
						goods: [{
							commodityId: 7,
							classId: 3,
							title: "好麦绵柔提子蛋糕280g/袋",
							goodImage: "/static/img/images/goodImage.png",
							price: 15.9,
							oldPrice: 20,
							sales: 59,
							inventory: 155,
							describe: "入口柔软  鲜香浓郁"
						}, ],
						icon: "",
						title: "新品上架"
					}
				]
			};
		},
		watch: {

			shoppingCartData: {
				handler(newVal, oldVal) {
					let tempFilter = newVal.filter((dd, ii) => {
						return dd.selected == false
					})
					if (tempFilter.length > 0) {
						this.cartAllSelectChecked= false
					} else {
						this.cartAllSelectChecked=  true
					}
				},
				deep: true
			}

		},
		computed: {
			...mapState(['shoppingCartData']),
			classDetail: function() {
				let detail = "";
				this.dataList.forEach((d, i) => {
					if (d.classId == this.dataListActive) {
						return detail = d;
					}
				})

				return detail
			},

			totalPrice: function() {
				let price = 0;
				this.shoppingCartData.forEach((d, i) => {
					if (d.selected) {
						price = price + (d.price * d.count)
					}
				})
				price = parseInt(price * 100) / 100;
				price = price.toFixed(2)

				return price
			},
		},
		onHide() {
			uni.hideLoading()
			uni.hideToast()

		},
		onUnload() {
			uni.hideLoading()
			uni.hideToast()
		},
		onLoad() {
			setTimeout(() => {
				this.signComponentByDanShow = true;
			}, 1000)

		},
		methods: {
			...mapMutations(["setShoppingCartData", ]),
			selectAll(e) {
				let tempArr = [...this.shoppingCartData];
				tempArr.forEach((d,i)=>{
					tempArr[i].selected = e.value;
				})
				this.setShoppingCartData(tempArr)
			},
			// 购物车数量更改
			goodsCountChange(e, d, i) {
				let tempArr = [...this.shoppingCartData];
				if (e.value) {
					tempArr[i].count = e.value;
				} else {
					tempArr.splice(i, 1);
				}
				this.setShoppingCartData(tempArr)

			},
			// 根据单价计算总价
			setPrice(num, price) {
				price = num * price;
				price = parseInt(price * 100) / 100;
				price = price.toFixed(2);
				return price
			},
			// 勾选购物车中商品
			goodsSelect(e, d, i) {
				let tempArr = [...this.shoppingCartData];
				tempArr[i].selected = e.value;
				this.setShoppingCartData(tempArr)

			},

			selectCount() {
				let tempFilter = this.shoppingCartData.filter((dd, ii) => {
					return dd.selected == true
				})
				return tempFilter.length
			},
			openShoppingCart() {
				this.shoppingCartShow = true;
			},
		
			addCommodityToShoppingCart(d) {
				let tempArr = this.shoppingCartData;
				let tempFilter = tempArr.filter((dd, ii) => {
					return dd.commodityId == d.commodityId
				})
				if (tempFilter.length > 0) {
					tempArr.forEach((dd, ii) => {
						if (dd.commodityId == d.commodityId) {
							tempArr[ii].count++;
						}
					})

				} else {
					tempArr.push({
						...d,
						selected: true,
						count: 1
					})
				}

				this.setShoppingCartData(tempArr)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F2F5;
	}

	.pageRoot {
		height: 100vh;
	}

	.shoppingCartDetailBox {
		max-height: 800rpx;
	}

	.classListBox {

		height: 93%;
		width: 100vw;

		.leftClassBox {
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			font-size: 26rpx;
			overflow-y: scroll;
			height: 100%;
			width: 150rpx;
			background-color: #D9E7E5;
		}

		.rightContentBox {
			padding: 0 30rpx;
			width: calc(100% - 215rpx);

			.goodAd {
				width: 100%;
				background-image: url("/static/img/images/dianPuBeiJing.png");
				background-position: center;
				background-size: 100%;
				border-radius: 20rpx;
				height: 200rpx;
			}
		}
	}


	.shoppingCartBar {
		z-index: 10086;
		position: fixed;
		width: calc(100% - 60rpx);
		height: 100rpx;
		background: linear-gradient(114deg, #223F44, #0F5D43);
		border-radius: 10rpx;
		bottom: 20rpx;
		left: 30rpx;
		padding: 18rpx 26rpx;
	}

	.headerTop {
		width: 100%;
		height: 500rpx;
		margin-bottom: 200rpx;
		background-image: url("/static/img/images/dianPuBeiJing.png");
		background-position: center;
		background-size: 100%;

		.dianPuContent {
			width: calc(100% - 210rpx);
		}

		.manJianBox {
			padding: 30rpx 32rpx;
			width: calc(100% - 60rpx);
			position: absolute;
			bottom: -142rpx;
			height: 228rpx;
			background-color: #fff;

		}
	}

	.manJianCardBox {
		display: inline-block;
		padding: 18rpx 20rpx;
		font-size: 24rpx;
		width: 262rpx;
		height: 132rpx;
		background-position: center;
		background-size: 100%;
	}

	.guanZhuBtn {
		background-color: rgba(11, 89, 63, 0.5);
	}

	.searchBarBox {
		height: 30rpx;
		width: 100%;
		height: 60rpx;
		border-radius: 66rpx;
		background-color: rgba(255, 255, 255, 0.8);

		input {
			font-size: 26rpx;
		}
	}
</style>
